<template>
  <view class="custom-uni-view">
    <scroll-view :scroll-top="scrollTop" @scrolltolower="bottomDatas" scroll-y="true" class="scroll-Y" @scroll="scroll">
      <view class="hot-box">
        <view class="hot-modal">
          <view class="hot-modal-top-text">
            <view>
              <view>爆品销售总额(元)</view>
              <view class="nub">{{statInfo.saleMoney | current}}</view>
            </view>
            <view class="ml100">
              <view>爆品销售总量(单)</view>
              <view class="nub">{{statInfo.saleVolume || 0}}</view>
            </view>
          </view>
          <view class="hot-modal-top-cont">
            <view class="box">
              <view>待核销额(元)</view>
              <view class="nub">￥{{statInfo.unUseMoney | current}}</view>
              <view>共计{{statInfo.unUseVolume}}单</view>
            </view>
            <view class="box">
              <view>已核销额(元)</view>
              <view class="nub">￥{{statInfo.useMoney | current}}</view>
              <view>共计{{statInfo.useVolume}}单</view>
            </view>
            <view class="box">
              <view>已过期(元)</view>
              <view class="nub">￥{{statInfo.expireMoney | current}}</view>
              <view>共计{{statInfo.expireVolume}}单</view>
            </view>
          </view>
        </view>
        <view :class="{fixedTab: old.scrollTop >= 150}">
          <view class="tag-line4" @click="gotoPages">
            <view class="img">
              <image src="../../static/image/msg.png"></image>
              <view>{{failCount>0?'您有'+failCount+'款爆品审核失败，点击查看失败原因':'暂无爆品审核失败订单'}}</view>
            </view>
            <view class="arrow"><image src="../../static/image/arrow1.png"></image></view>
          </view>
          <view class="manage-top">
            <view class="common-tab">
              <view class="common-tab-text" :class="{active: tabIndex == ''}" @click="changeTab('')">全部</view>
              <view class="common-tab-text" :class="{active: tabIndex === '2'}" @click="changeTab('2')">进行中</view>
              <view class="common-tab-text" :class="{active: tabIndex === '1'}" @click="changeTab('1')">预热中</view>
              <view class="common-tab-text" :class="{active: tabIndex === '0'}" @click="changeTab('0')">审核中</view> 
              <view class="common-tab-text" :class="{active: tabIndex === '3'}" @click="changeTab('3')">已结束</view> 
            </view>
          </view>
        </view>
        <view class="h30"></view>
        <view class="manage-cont">
          <view class="hot-goods-list" v-for="(item, index) in orderData" :key="index" @click="gotoOrder(item)">
            <view class="img">
              <image :src="item.imageUrl"></image>
            </view>
            <view class="line">
              <view class="tit">
                <text class="tit-text text2Ellipsis">{{item.title}}</text>
                <view class="refs"></view>
                <text class="tit-st" :class="{active: item.status != 2 && item.status != 3}">
                  {{item.statusName}}
                </text>
              </view>
              <view class="text2">运营时间：{{item.actBeginTimeStr}}</view>
              <view class="text2">已售数量：{{item.salesVolume}}</view>
              <view class="text1">
                <view class="nub1">已核人数：{{item.peopleCount}}</view>
                <view class="nub2">￥{{item.price}}</view>
              </view>
            </view>
          </view>
          <view class="loading" v-if="orderData.length == 0">
            暂无数据
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { findMyPage, auditCount, hotStat } from '@/service/hot/hot.service.js'
var _self;
export default {
  data() {
    return {
      tabIndex: '',
      pages: {
        current: 1,
        size: 10,
        total: 0
      },
      orderData: [],
      failCount: '',
      statInfo: {},
      scrollTop: 0,
      old: {
        scrollTop: 0
      }
    }
  },
  mounted() {
    this.getDatas();
  },
  onShow: function() {
    _self = this;
    this.old.scrollTop = 0;
    this.getHotStat(); // 获取商家爆品统计
    this.getFailShop(); // 获取爆品审核失败数量
  },
  methods: {
    scroll: function(e) {
      this.old.scrollTop = e.detail.scrollTop;
    },
    getHotStat () {
      hotStat({}, (res) => {
        if (res.status == 0) {
          this.statInfo = res.data;
        }
      })
    },
    gotoPages () {
      if (this.failCount > 0) {
        uni.navigateTo({
          url: '/pages/hotGoods/audit'
        })  
      }
    },
    changeTab (index) {
      this.tabIndex = index;
      this.pages.current = 1;
      this.orderData = [];
      this.getDatas();
    },
    getFailShop () {
      auditCount({}, (res) => {
        if (res.status == 0) {
          this.failCount = res.data.count;
        }
      })
    },
    bottomDatas () {
      if (this.pages.current == 1) {
        return false;
      } else if (this.pages.total > this.orderData.length) {
        this.getDatas();
      } else if (this.pages.current != 1) {
        uni.showToast({
          title: '已经到底了',
          icon: 'none'
        })
      }
    },
    getDatas () {
      uni.showLoading()
      let params = {
        size: this.pages.size,
        current: this.pages.current,
        status: this.tabIndex
      }
      findMyPage(params, (res) => {
        if (res.status == 0) {
          if (this.pages.current == 1) {
            this.orderData = res.data.records;
          } else {
            this.orderData.push(...res.data.records);
          }
          this.pages.total = res.data.total;
          if (this.pages.total > this.orderData.length) {
            this.pages.current++
          }
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
        uni.hideLoading()
      });
    },
    gotoOrder (item) {
      let params = {
        id: item.id,
        title: item.title,
        imageUrl: item.imageUrl,
        price: item.price,
        limitNumber: item.limitNumber
      }
      uni.navigateTo({
        url: '/pages/hotGoods/order?shop='+encodeURIComponent(JSON.stringify(params))
      })  
    }
  }
}
</script>

<style lang="scss" scoped>
.fixedTab {
  width: 100%;
  background-color: #FFFFFF;
  position: fixed;
  z-index: 66;
  top: 0;
  // transition: all .2s ease;
  animation: clouds .2s ease;
  .tag-line4 {
    margin-top: 40rpx;
  }
}
@keyframes clouds {
  0% {
    top: 60rpx;
  }
  100% {
    top: 0;
  }
}

.hot-box {
  height: 100vh;
}
.hot-modal {
  height: 270rpx;
  background:linear-gradient(90deg, #434343 0%, #636363 100%);
  font-family: PingFang SC;
  &-top-text {
    padding-top: 43rpx;
    font-size: 26rpx;
    font-weight: 500;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    .nub {
      font-size:38rpx;
      margin-top: 38rpx;
      text-align: center;
    }
    .ml100 {
      margin-left: 100rpx;
    }
  }
  &-top-cont {
    width: 587rpx;
    height: 105rpx;
    background: rgba(255,255,255,1);
    box-shadow: 0 0 10rpx 0 rgba(6,0,1,0.18);
    border-radius: 10rpx;
    margin: 50rpx auto 0;
    padding: 25rpx 50rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 22rpx;
    font-weight: 500;
    color: rgba(102,102,102,1);
    text-align: center;
    .nub {
      font-size: 30rpx;
      font-weight: bold;
      color: rgba(194,172,120,1);
      margin: 10rpx 0 7rpx;
    }
  }
}
.loading {
  text-align: center;
  font-size: 26rpx;
  color: #999999;
}
image {
  width: 100%;
  height: 100%;
}
.custom-uni-view {
  background-color: #FFFFFF;
}
.h30 {
  height: 30rpx;
  background-color: #FAFAFA;
}
.tag-line4 {
  // background-color: #FFFFFF;
  margin: 132rpx 32rpx 30rpx;
  .img {
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    image {
      display: block;
      width: 32rpx;
      height: 38rpx;
      margin-right: 20rpx;
    }
  }
}
.manage-top {
  background-color: #FFFFFF;
  padding: 0 30rpx 17rpx;
}
.manage-cont {
  padding: 24rpx 30rpx;
  background-color: #FFFFFF;
  .hot-goods-list {
    height: 181rpx;
    align-items: flex-start;
    margin-bottom: 20rpx;
    .line {
      .tit {
        margin-bottom: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .tit-text {
          width: 312rpx;
        }
        .refs {
          width:1px;
          height:58rpx;
          background:rgba(225,225,225,1);
          margin-left: 6rpx;
        }
        .tit-st {
          flex: 1;
          font-size: 28rpx;
          color: #999999;
          margin-left: 13rpx;
          &.active {
            color: #C2AC78;
          }
        }
      }
      .text1 {
        margin-top: 17rpx;
        .nub1 {
          font-size: 22rpx;
          color: #999999;
          line-height: 22rpx;
        }
        .nub2 {
          font-size: 30rpx;
          color: #666666;
          line-height: 22rpx;
          flex: 1;
          text-align: right;
        }
      }
      .text2 {
        font-size: 22rpx;
        line-height: 22rpx;
        margin-top: 15rpx;
        color: #999999;
      }
    }
  }
}

</style>
